<template>
  <div class="cjui-video-player">
    <video ref="videoRef" :width="width" :height="height" :loop="loop" :muted="muted" :poster="poster" :preload="preload" controls>
      <template v-if="typeof src === 'array'" >
        <source v-for="(item, i) in src" :src="item.src" :type="item.type" :key="i">
      </template>

      <template v-else>
        <source :src="src">
      </template>

      <p>你的浏览器不支持 HTML5 视频。可点击<a :href="src">此链接</a>观看</p>
    </video>

    <button @click="load">Load</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'CjuiVideoPlayer',
}
</script>

<script lang="ts" setup>
import { ref } from 'vue';

const props = defineProps({
  width: {
    type: Number,
    default: undefined
  },
  height: {
    type: Number,
    default: undefined
  },
  src: {
    type: [String, Array],
    default: ''
  },
  loop: {
    type: Boolean,
    default: false
  },
  muted: {
    type: Boolean,
    default: false
  },
  poster: {
    type: String,
    default: ''
  },
  preload: {
    type: String,
    default: 'auto'
  },
});

const videoRef = ref(null);

function load() {
  videoRef.value.load();
}
</script>

<style lang="scss">

</style>
